import { getClassNames, Icon, useData } from "magic-ui-react"
import { TransitionGroup, CSSTransition } from "react-transition-group"
import styles from './styles.module.less'
import './styles.less'
import { FC, useEffect, useState } from "react"
import { useAppDispatch, useAppSelector } from "@/utils/hooks"
import { chunk, cloneDeep, isNull, repeat } from "lodash"
import { appConfigActions } from "@/store/appConfigSlice"
import _ from "lodash"
const Content: FC<{
  editClick: (key: any) => void
}> = (porps) => {

  const {
    editClick
  } = porps
  const {
    appConfig: {
      page
    }
  } = useAppSelector(state => state)

  const dispatch = useAppDispatch()

  const [list, setList] = useState<any[]>([]);
  const [pages, setPages] = useState<any[]>([]);
  const [totalPage, setTotalPage] = useState(0);
  const [currentPage, setCurrentPage] = useState(0);
  const [hoverIndex, setHoverIndex] = useState<null | number>(null)

  const data = useData({
    rows: 0,
    columns: 0
  })

  useEffect(() => {
    const rows = Math.ceil((window.innerHeight - 90) / 100)
    const columns = Math.ceil(page.pageList.length / rows)
    data.rows = rows
    data.columns = columns
    let chunkList = chunk(page.pageList, rows)
    setPages(chunkList)
    setTotalPage(columns)

    if (currentPage === columns && currentPage > 0) {
      setCurrentPage(columns - 1)
      setList(chunkList[columns - 1])
    } else {
      setList(chunkList[currentPage])
    }

  }, [page.pageList])



  const getScale = (index: number) => {
    const num = isNull(hoverIndex) ? 0 : (3 - Math.abs(index - hoverIndex))
    const scaleNum = (num > 0 ? num : 0)
    return {
      transform: `scale(1.${scaleNum}, 1.${scaleNum}) translateX(-${scaleNum * 8}px)`,
    }
  }

  /**
   * 翻页
   * @returns ReactNode
   */
  const turnPage = () => {
    return (
      <div className="flex justify-center gap-4">
        <div
          className={getClassNames([
            'transition cursor-pointer',
            {
              'hover:text-yellow-500': currentPage !== 0,
              'cursor-not-allowed': currentPage === 0
            }
          ])}
          onClick={() => {
            if (currentPage > 0) {
              setList([])
              setTimeout(() => {
                setCurrentPage(currentPage - 1)
                setList(pages[currentPage - 1])
                // }, pages[currentPage].length * 100 + 550)
              }, 0)
            }
          }}
        >
          <Icon size={18} icon="chevron-left" />
        </div>
        <div
          className={getClassNames([
            'transition cursor-pointer',
            {
              'hover:text-yellow-500': currentPage !== totalPage - 1,
              'cursor-not-allowed': currentPage === totalPage - 1
            }
          ])}
          onClick={() => {
            if (currentPage < totalPage - 1) {
              setList([])
              setTimeout(() => {
                setCurrentPage(currentPage + 1)
                setList(pages[currentPage + 1])
                // }, pages[currentPage].length * 100 + 550)
              }, 0)
            }
          }}
        >
          <Icon size={18} icon="chevron-right" />
        </div>
      </div>
    )
  }

  /**
   * 标题
   * @param item 信息
   * @param index 索引
   * @returns ReactNode
   */
  const labelRender = (item: any, index: number) => {
    return (
      <div
        className={getClassNames([
          styles.label,
          {
            // [styles.labelVisible]: true
            [styles.labelVisible]: hoverIndex === index || page.currentPage == item.key
          },
        ])}
      >
        {item.label}
      </div>
    )
  }

  /**
   *分页操作
   */
  const optionsRender = (item: any, index: number) => {
    return (
      <div
        className={getClassNames([
          styles.edit,
          {
            [styles.editVisible]: hoverIndex === index
          },
        ])}
        onClick={(e) => {
          e.stopPropagation()
        }}
      >
        {/* 删除按钮 */}
        <Icon
          icon="circle-xmark"
          status="error"
          onClick={() => {
            const arr = cloneDeep(page.pageList)
            arr[index + currentPage] = null!
            const newList = _.compact(arr)

            dispatch(appConfigActions.updataPage({
              pageList: newList,
            }))
          }}
        />
        {/* 编辑按钮 */}
        <Icon
          icon="wrench"
          className="text-yellow-400"
          onClick={() => {
            editClick(item)
          }}
        />
      </div>
    )
  }

  return (
    <>
      {turnPage()}

      {/* 列表 */}
      <TransitionGroup
        onMouseLeave={() => {
          setHoverIndex(null)
        }}
        exit={false}
        onEnded={() => {
          console.log('onEnded');
        }}
        className={styles.pageBoxlist}
      >
        {list?.map((item: any, index: number) => (
          <CSSTransition
            key={item.key}
            timeout={500}
            classNames="page-item"
            style={{
              transitionDelay: `${index * 100}ms`
            }}
          >
            <div>
              <div
                onMouseEnter={() => {
                  setHoverIndex(index)
                }}
                className={getClassNames([
                  styles.EditPageListItem,
                ])}
                onClick={() => {
                  dispatch(appConfigActions.updataPage({
                    currentPage: item.key
                  }))
                }}
                style={getScale(index)}
              >
                {labelRender(item, index)}
                <Icon size={20} icon={item.icon} />
                {optionsRender(item, index)}
              </div>
            </div>
          </CSSTransition>
        ))}
      </TransitionGroup>
    </>
  )
}

export default Content